<template>
  <div class="header w_p100 flex-between">
    <div class="headleft flex-start">
      <img class="headLogo" src="@/assets/logo.png" alt="" />
      <span class="headTitle">后台管理系统</span>
    </div>
    <div class="userinfo flex-start">
      <div class="avatar">
        <img :src="info.imgSrc" alt="" />
      </div>
      <span class="username">{{ info.adminName }}</span>
      <div class="open" tabindex="1111" @click="changeState">
        <img :src="src" alt="" />
      </div>
    </div>
    <div v-show="flag === true" class="list">
      <div class="all flex-start">
        <div class="touxiang">
          <img :src="info.imgSrc" alt="" />
        </div>
        <div class="rightinfo">
          <div>
            <span>{{ info.adminName }}</span>
            <span
              :class="[
                'identity',
                info.roleName === '超级管理员' ? 'super' : ''
              ]"
              >{{ info.roleName }}</span
            >
          </div>
          <div class="tel">{{ info.adminEmail }}</div>
        </div>
      </div>
      <ul>
        <li class="flex-start" @click="toinfo">
          <div class="pic">
            <img src="@/assets/info.png" alt="" />
          </div>
          <span>个人信息</span>
        </li>
        <li class="flex-start" @click="loginout">
          <div>
            <img src="@/assets/loginout.png" alt="" />
          </div>
          <span>退出</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import imgSrc1 from '@/assets/open.png'
import imgSrc2 from '@/assets/fold.png'
// import download from '@/utils/tools/downloadImg'
// import file from '@/utils/tools/fileExport'

export default {
  data () {
    return {
      flag: false
    }
  },
  computed: {
    src () {
      if (this.flag === false) {
        return imgSrc1
      } else {
        return imgSrc2
      }
    },
    info () {
      return this.$store.state.user.info
    }
  },
  created () {
    this.$store.dispatch('user/getUserInfo').then(res => {
      // console.log(res.data.adminAvatar)
    })
  },
  mounted () {
    document.addEventListener('click', e => {
      this.flag = false
    })
  },
  methods: {
    changeState (e) {
      e.stopPropagation()
      this.flag = !this.flag
    },
    toinfo (e) {
      e.stopPropagation()
      this.$router.push('/info')
      this.flag = false
    },
    loginout (e) {
      e.stopPropagation()
      this.$store.dispatch('login/systemLogout').then(res => {
        this.$message({
          type: 'success',
          message: res,
          duration: 1000
        })
        this.$router.push('/login')
        window.location.reload()
      })
      // this.$router.push('/login')
      this.flag = false
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  height: 60px;
  // background-color: skyblue;
  padding-left: 24px;
  padding-right: 24px;
  position: relative;
  .headleft {
    img.headLogo {
      height: 24px;
      width: 24px;
    }
    span.headTitle {
      margin-left: 6px;
      height: 28px;
      opacity: 1;
      font-size: 20px;
      font-family: Helvetica;
      color: #1b1f35;
      line-height: 28px;
    }
  }
  .userinfo {
    .avatar {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 1px solid #cccccc;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .username {
      color: #1b1f35;
      margin-left: 8px;
      margin-right: 24px;
    }
    .open {
      outline: none;
      width: 14px;
      height: 14px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .list {
    position: absolute;
    width: 220px;
    height: 184px;
    bottom: -186px;
    z-index: 999;
    right: 24px;
    background: #fff;
    box-shadow: 0px 1px 6px 0px rgba(24, 33, 56, 0.28);
    border-radius: 4px;
    .all {
      height: 88px;
      .touxiang {
        width: 36px;
        height: 36px;
        border: 1px solid #ccc;
        border-radius: 50%;
        overflow: hidden;
        margin-left: 20px;
        margin-right: 10px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .identity {
        display: inline-block;
        margin-left: 6px;
        // width: 30px;
        padding: 4px 5px;
        background: #e9f3ff;
        opacity: 1;
        font-size: 10px !important;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        color: #2e90ff;
        line-height: 14px;
      }
      .tel {
        width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-top: 7px;
      }
    }
    ul {
      li {
        height: 48px;
        &:hover {
          background-color: #e6e9f0;
        }
        div {
          width: 20px;
          height: 20px;
          margin-left: 20px;
          margin-right: 10px;
          img {
            width: 100%;
          }
        }
      }
    }
  }
  .super {
    background: #fff5eb !important;
    color: #e88300 !important;
  }
}
</style>
